<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>面试题管理</el-breadcrumb-item>
      <el-breadcrumb-item>面试题类型</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="pageInfo.key"
            clearable
            @clear="clearClick()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="keyCilck"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-button @click="addMstSel" type="primary">添加</el-button>
          <el-button @click="delAllMstSel" type="danger">删除</el-button>
        </el-col>
      </el-row>
      <el-table
      @selection-change="handleSelectionChange"
      :data="mstSelData" style="width: 100%" :stripe="true" border>
        <el-table-column
      type="selection"
      width="55">
    </el-table-column>
        <el-table-column prop="mstSelName" label="面试题分类名称">
        </el-table-column>
        <el-table-column prop="mstSelDes" label="面试题分类介绍">
        </el-table-column>
        <el-table-column prop="mstSelCreatetime" label="创建时间">
        </el-table-column>
        <el-table-column prop="mstSelSort" label="面试题分类排序">
        </el-table-column>
        <el-table-column prop="mstSelImg" label="面试题分类大图">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.mstSelImg"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="mstSelIcon" label="面试题分类小图" width="180">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.mstSelIcon"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="primary" @click="editMstSel(scope.row.id)"
              >修改</el-button
            >
            <el-button @click="delMstSel(scope.row.id)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <el-dialog
      title="添加面试题分类"
      :visible.sync="mstSelDialogVisible"
      width="50%"
      :before-close="mstSelHandleClose"
    >
      <el-form
        ref="addFormRef"
        :model="addForm"
        label-width="100px"
        :rules="addRules"
      >
        <el-form-item label="分类名称:" prop="mstSelName">
          <el-input v-model="addForm.mstSelName"></el-input>
        </el-form-item>
        <el-form-item label="分类介绍:" prop="mstSelDes">
          <el-input v-model="addForm.mstSelDes"></el-input>
        </el-form-item>
        <el-form-item label="分类排序:" prop="mstSelSort">
          <el-input v-model.number="addForm.mstSelSort"></el-input>
        </el-form-item>
        <el-form-item label="分类大图片:" prop="mstSelImg">
          <el-upload
            class="avatar-uploader"
            :action="updateImgUrl"
            :headers="headObj"
            :show-file-list="false"
            :on-success="mstSelImgSuccess"
          >
            <img
              v-if="this.addForm.mstSelImg"
              :src="this.addForm.mstSelImg"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="分类小图标:" prop="mstSelIcon">
          <!-- <el-input v-model="addForm.mstSelIcon"></el-input> -->
          <el-upload
            class="avatar-uploader"
            :action="updateImgUrl"
            :headers="headObj"
            :show-file-list="false"
            :on-success="mstSelIconSuccess"
          >
            <img
              v-if="this.addForm.mstSelIcon"
              :src="this.addForm.mstSelIcon"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mstSelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFormClick">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改面试题分类"
      :visible.sync="editMstSelDialogVisible"
      width="50%"
      :before-close="editMstSelHandleClose"
    >
      <el-form
        ref="editFormRef"
        :model="editForm"
        label-width="100px"
        :rules="addRules"
      >
        <el-form-item label="分类名称:" prop="mstSelName">
          <el-input v-model="editForm.mstSelName"></el-input>
        </el-form-item>
        <el-form-item label="分类介绍:" prop="mstSelDes">
          <el-input v-model="editForm.mstSelDes"></el-input>
        </el-form-item>
        <el-form-item label="分类排序:" prop="mstSelSort">
          <el-input v-model.number="editForm.mstSelSort"></el-input>
        </el-form-item>
        <el-form-item label="分类大图片:" prop="mstSelImg">
          <el-upload
            class="avatar-uploader"
            :action="updateImgUrl"
            :headers="headObj"
            :show-file-list="false"
            :on-success="editMstSelImgSuccess"
          >
            <img
              v-if="this.editForm.mstSelImg"
              :src="this.editForm.mstSelImg"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="分类小图标:" prop="mstSelIcon">
          <!-- <el-input v-model="addForm.mstSelIcon"></el-input> -->
          <el-upload
            class="avatar-uploader"
            :action="updateImgUrl"
            :headers="headObj"
            :show-file-list="false"
            :on-success="editMstSelIconSuccess"
          >
            <img
              v-if="this.editForm.mstSelIcon"
              :src="this.editForm.mstSelIcon"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editMstSelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editFormClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  addMstSel,
  getMstSel,
  getMstSelById,
  editMstSel,
  delMstSel
} from '@/api/mstsel/index'
export default {
  // import 引入的组件需要注入到对象中才能使用
  name: 'mstSel',
  components: {},
  props: {},
  data () {
    // 这里存放数据
    return {
      mstSelDialogVisible: false,
      mstSelData: [],
      pageInfo: {
        pageSize: 10,
        pageNum: 1,
        key: ''
      },
      total: 0,
      addForm: {
        mstSelName: '',
        mstSelDes: '',
        mstSelSort: 0,
        mstSelImg: '',
        mstSelIcon: ''
      },
      addRules: {
        mstSelName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ],
        mstSelDes: [
          { required: true, message: '请输入分类描述', trigger: 'blur' },
          {
            min: 0,
            max: 200,
            message: '长度在 0 到 200 个字符',
            trigger: 'blur'
          }
        ],
        mstSelSort: [
          { required: true, message: '请输入分类序号', trigger: 'blur' },
          { type: 'number', message: '分类序号为数字值' }
        ],
        mstSelImg: [
          { required: true, message: '请输入分类图片', trigger: 'blur' }
        ],
        mstSelIcon: [
          { required: true, message: '请输入分类图标', trigger: 'blur' }
        ]
      },
      updateImgUrl: 'http://192.168.3.202:7001/api/admin/third/img/UploadImg',
      headObj: {
        AdminAuthorizationToken: this.$store.getters.token
      },
      editMstSelDialogVisible: false,
      editForm: {},
      multipleSelection: []
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async delMstSel (id) {
      const ids = []
      ids.push(id)
      const res = await delMstSel(ids)
      this.$message.success(res.data)
      this.getData()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    async delAllMstSel () {
      const ids = this.multipleSelection.map(item => { return item.id })
      // console.log(ids)
      const res = await delMstSel(ids)
      this.$message.success(res.data)
      this.multipleSelection = []
      this.getData()
    },
    editMstSelIconSuccess (response) {
      this.$message.success('上传成功')
      this.editForm.mstSelIcon = response.data
    },
    editMstSelImgSuccess (response) {
      this.$message.success('上传成功')
      this.editForm.mstSelImg = response.data
    },
    async editMstSel (id) {
      console.log(id)
      const res = await getMstSelById(id)
      this.editForm = res.data
      this.editMstSelDialogVisible = true
    },
    editFormClick () {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return false
        const res = await editMstSel(this.editForm)
        this.editMstSelDialogVisible = false
        this.$message.success(res.data)
        this.getData()
      })
    },
    editMstSelHandleClose () {
      this.editMstSelDialogVisible = false
    },
    addMstSel () {
      this.mstSelDialogVisible = true
    },
    mstSelHandleClose () {
      this.mstSelDialogVisible = false
      this.$refs.addFormRef.resetFields()
    },
    mstSelImgSuccess (response) {
      this.$message.success('上传成功')
      this.addForm.mstSelImg = response.data
    },
    mstSelIconSuccess (response) {
      this.$message.success('上传成功')
      this.addForm.mstSelIcon = response.data
    },
    addFormClick () {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return false
        const res = await addMstSel(this.addForm)
        this.mstSelDialogVisible = false
        this.$message.success(res.data)
        this.$refs.addFormRef.resetFields()
        this.getData()
      })
    },
    async getData () {
      const res = await getMstSel(this.pageInfo)
      this.mstSelData = res.data.list
      this.total = parseInt(res.data.total)
    },
    clearClick () {
      this.pageInfo.key = ''
      this.getData()
    },
    handleSizeChange (newPageSize) {
      this.pageInfo.pageSize = newPageSize
      this.getData()
    },
    handleCurrentChange (newPageNum) {
      this.pageInfo.pageNum = newPageNum
      this.getData()
    },
    keyCilck () {
      this.getData()
    }
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () {
    this.getData()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有 keep-alive 缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共 css 类
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
